<script setup>
import { reactive, toRefs, ref, onMounted } from 'vue';
import { CloseBold } from '@element-plus/icons-vue';
import { ElDialog, ElForm, ElFormItem, ElIcon, ElInput, ElOption, ElSelect } from 'element-plus';

const props = defineProps({
  userBoxShow: Boolean,
  tableChecked: String,
  checkedTableItem: Object,
  checkedTreeItem: Object,
});
const { userBoxShow, tableChecked, checkedTreeItem, checkedTableItem } = toRefs(props);
const emit = defineEmits(['handleCloseUserBox', 'handleGetUserBoxEmit']);

const ruleFormRef = ref();
const deptName = ref('');
const ruleForm = reactive({
  username: '',
  gender: null,
  mobile: '',
  status: 1,
  politicsStatus: '',
  jobTitle: '',
  age: '',
  role: null,
});
const rules = reactive({
  username: [
    { required: true, message: '此项为必填项', trigger: 'blur' },
    { min: 1, max: 10, message: '长度限制10', trigger: 'blur' },
  ],
  gender: [{ required: true, message: '此项为必填项', trigger: 'change' }],
  role: [{ required: true, message: '此项为必填项', trigger: 'change' }],
  mobile: [
    { required: true, message: '手机号格式不正确', trigger: 'blur' },
    { message: '手机号格式不正确', pattern: /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/ },
  ],
});

onMounted(() => {
  if (tableChecked.value == 'ADD') {
    ruleForm.jobTitle = '';
    ruleForm.politicsStatus = '';
    ruleForm.age = '';
    ruleForm.username = '';
    ruleForm.gender = '';
    ruleForm.role = '';
    ruleForm.mobile = '';
    deptName.value = checkedTreeItem.value.name;
  } else if (tableChecked.value == 'EDIT') {
    ruleForm.jobTitle = checkedTableItem.value.jobTitle;
    ruleForm.politicsStatus = checkedTableItem.value.politicsStatus;
    ruleForm.age = checkedTableItem.value.age;
    ruleForm.username = checkedTableItem.value.username;
    ruleForm.gender = checkedTableItem.value.gender;
    ruleForm.role = checkedTableItem.value.role;
    ruleForm.mobile = checkedTableItem.value.mobile;
    deptName.value = checkedTableItem.value.name;
  }
});

const closeBoxShowDialog = () => {
  ruleFormRef.value.resetFields();
  ruleForm.jobTitle = '';
  ruleForm.politicsStatus = '';
  ruleForm.age = '';
  emit('handleCloseUserBox');
};

const handleSubmit = () => {
  ruleFormRef.value.validate((err) => {
    if (err) {
      if (tableChecked.value == 'ADD') {
        emit('handleGetUserBoxEmit', ruleForm, 'ADD');
      } else {
        const info = {};

        info['id'] = checkedTableItem.value.id;
        info['gender'] = ruleForm.gender;
        info['jobTitle'] = ruleForm.jobTitle;
        info['age'] = ruleForm.age ?? '';
        info['politicsStatus'] = ruleForm.politicsStatus ?? '';
        info['role'] = ruleForm.role;
        info['organizationId'] = checkedTableItem.value.organizationId;
        emit('handleGetUserBoxEmit', info, 'EDIT');
      }

      ruleFormRef.value.resetFields();
    }
  });
};
</script>
<template>
  <div class="user_loading">
    <ElDialog
      v-model="userBoxShow"
      :append-to-body="false"
      :close-on-click-modal="false"
      destroy-on-close
      :show-close="false"
      :align-center="true"
    >
      <template #header>
        <div class="my-header">
          <div class="dialog-title">{{ tableChecked == 'ADD' ? '添加人员' : '编辑人员' }}</div>
          <div class="dialog-close" @click="closeBoxShowDialog()">
            <ElIcon color="#333333">
              <CloseBold />
            </ElIcon>
          </div>
        </div>
      </template>

      <main>
        <ElForm
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          class="demo-ruleForm"
          label-position="right"
          status-icon
          label-width="110px"
        >
          <ElFormItem label="姓名:" prop="username">
            <ElInput
              v-model="ruleForm.username"
              placeholder="请输入"
              maxlength="10"
              clearable
              :disabled="tableChecked == 'EDIT' ? true : false"
            />
          </ElFormItem>
          <ElFormItem label="性别:" prop="gender">
            <ElSelect v-model="ruleForm.gender" placeholder="请选择">
              <ElOption label="男" :value="0" />
              <ElOption label="女" :value="1" />
            </ElSelect>
          </ElFormItem>
          <ElFormItem label="联系方式:" prop="mobile">
            <ElInput
              v-model="ruleForm.mobile"
              placeholder="请输入"
              maxlength="11"
              clearable
              :disabled="tableChecked == 'EDIT' ? true : false"
            />
          </ElFormItem>
          <ElFormItem label="部门:">
            <ElInput v-model="deptName" placeholder="请输入" maxlength="10" disabled />
          </ElFormItem>
          <ElFormItem label="职位:">
            <ElInput v-model="ruleForm.jobTitle" placeholder="请输入" maxlength="10" clearable />
          </ElFormItem>

          <ElFormItem label="年龄:">
            <ElInput v-model="ruleForm.age" placeholder="请输入" maxlength="10" clearable type="number" />
          </ElFormItem>
          <ElFormItem label="政治面貌:">
            <ElSelect v-model="ruleForm.politicsStatus" placeholder="请选择" clearable>
              <ElOption label="党员" :value="0" />
              <ElOption label="共青团员" :value="1" />
              <ElOption label="群众" :value="2" />
            </ElSelect>
          </ElFormItem>
          <ElFormItem label="角色:" prop="role">
            <ElSelect v-model="ruleForm.role" placeholder="请选择" clearable>
              <ElOption label="主管理员" :value="0" />
              <ElOption label="次管理员" :value="1" />
              <ElOption label="普通用户" :value="2" />
            </ElSelect>
          </ElFormItem>
        </ElForm>
      </main>

      <div class="dialog-footer">
        <div @click="closeBoxShowDialog()">取消</div>
        <div @click="handleSubmit()">确定</div>
      </div>
    </ElDialog>
  </div>
</template>

<style scoped lang="scss">
.user_loading {
  :deep(.el-dialog) {
    width: 861px;
    height: 682px;
    border-radius: 10px;
  }

  :deep(.el-dialog__header) {
    padding: 0 !important;
  }

  .my-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    padding-left: 32px;
    border-bottom: 1px solid #f8f8f8;

    .dialog-title {
      color: #333333;
      font-size: 18px;
      font-family: Source Han Sans CN;
    }

    .dialog-close {
      cursor: pointer;
    }
  }

  .dialog-footer {
    position: absolute;
    right: 70px;
    bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    div {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 108px;
      height: 40px;
      font-size: 16px;
      font-family: Source Han Sans CN, Source Han Sans CN-Normal;
      border: 1px solid #00ad93;
      border-radius: 6px;
      cursor: pointer;

      &:first-child {
        margin-right: 20px;
        color: #00ad93;
      }

      &:nth-child(2) {
        color: #ffffff;
        background: #00ad93;
      }
    }
  }

  main {
    padding: 20px 50px;

    :deep(.el-form-item__label) {
      color: #333333;
      font-size: 18px;
      font-family: Source Han Sans CN;
      line-height: 40px;
    }
  }
}
</style>
